在寫 UI 的時候，除了顯示內容給使用者看的元件以外，接收使用者輸入的表單元件也很常見。在前面的筆記裡，已經整理過如 TextFiel、Button 等表單元件，今天的耕讀筆記，要再研究幾個常用的表單元件。

RadioButton 元件

在設計表單時，若提供多個選項給使用者，但要限制只能選擇一個選項時，就可以使用 RadioButton 元件。Compose 的 RadioButton 元件設計只包括外顯的「圓圈」UI、元件是否被選擇的狀態以及 onClick 事件，若要在選項旁邊放置文字說明，則要自行用 Text 實作。

val options = listOf("A", "B", "C")
val (selectedOption, onOptionSelected) = remember { mutableStateOf(options[1]) }

Column {
    options.forEach { text ->
        Row {
            RadioButton(
                selected = (text == selectedOption),
                onClick = { onOptionSelected(text) }
            )
            Text(
                text = text,
            )
        }
    }
}

在上面的例子裡，先宣告了一個 List 存放 A、B、C 三個選項，再用這個 List 去產生 RadioButton 及 Text 的組合，被使用者選取的選項會被紀錄在 selectedOption 裡。當 RadioButton 被點擊時，就會以該元件的選項更新 selectedOption 的值。

Checkbox 元件

若表單裡的多個選項可以多選時，可以改用 Checkbox 達成。Checkbox 的參數與 RadioButton 類似，只是把 selected 改成 checked、把 onClick 改成 onCheckedChange。另外，為了紀錄哪些選項被勾選，範例裡使用一個 Map 結構來紀錄：

val checkedState = remember { mutableStateMapOf("A" to false, "B" to false, "C" to false) }

Column {
    checkedState.forEach { (key, value) ->
        Row {
            Checkbox(
                checked = value,
                onCheckedChange = { checkedState[key] = it },
            )
            Text(
                text = key,
            )
        }
    }
}

假如想要修改 Checkbox 被勾選時的顏色，元件參數裡也有 colors 可以調整，傳入一個實作 CheckboxColors 介面的類別，比方說 CheckboxDefaults 就可以從預設樣式裡去做微調：

Checkbox(
    checked = false,
    onCheckedChange = { /* ... */ },
    colors = CheckboxDefaults.colors(
        checkedColor = Color(0xFF0079D3)
    )
)

Switch 元件

在 Mobile 上出現 Switch 元件後，這種開關設計在 Desktop UI 上也開始流行起來，尤其特別常被拿來做「設定頁面」的選項開關，Compose for Desktop 也把這個元件移值過來了。

val checkedState = remember { mutableStateOf(false) }

Column {
    Switch(
        checked = checkedState.value,
        onCheckedChange = { checkedState.value = it }
    )
    Text(
        text = if (checkedState.value) "On" else "Off"
    )
}

其實 Switch 跟單個 Checkbox 元件非常類似，只要傳入 checked 參數並註冊 onCheckedChange 事件即可。在上面的例子裡，加了一個 Text 元件，依據當下的開關狀態顯示 On 或 Off 字樣。

Slider 元件

Slider 透過拖曳點在線上的位置來呈現數值，也是在做 UI 時很常用的元件，使用時傳入 value 參數及註冊 onValueChange 事件即可。

var sliderPosition by remember { mutableStateOf(0f) }

Slider(
    value = sliderPosition,
    onValueChange = { sliderPosition = it },
)
Text(text = ceil(sliderPosition * 100).toInt().toString())

在上面的例子裡，加了一個 Text 元件，方便呈現 Slider 元件裡實際的數值（為求呈現區間為 1 至 100，先乘上 100 後無條件進位）。

參考資料

• Jetpack Compose Playground - RadioButton
• Jetpack Compose Playground - Checkbox
• Jetpack Compose Playground - Switch
• Jetpack Compose Playground - Slider